<template>
    <div v-if="isNoneSong" class="recommend">
        <!-- 推荐歌单 -->
        <div v-if="songInfo" class="songInformation">
            <img class="img" crossorigin="" @load="handleSwitchBackground" ref="imgDOM" :src="songInfo?.al?.picUrl || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'">
            <div>
                <div style="text-align: left;">
                    <p style="color: #fff;font-weight: 600;">{{ songInfo.name }}</p>
                    <a @click="() => router.push({ path: '/singer/Details', query: { id: songInfo?.ar[0]?.id } })"
                        class="songInfoSinger">{{ songInfo?.ar[0]?.name }}</a>
                </div>
                <div style="text-align: center;">
                    <IsLike :id="songInfo.id" :is="musicLikeListId.some(id => id === songInfo?.id)" />
                    <div style="color: #fff;font-size: 12px;">{{ countDesc }}</div>
                </div>
            </div>
        </div>
        <div v-if="songInfo" class="lyric" ref="lyricDOM" style="text-align: center;">
            <div v-for="(item, index) in song" :class="'lyricDiv' + index" @click="handleUpdateAudioSong(item)">
                <span v-for="(span, index) in item.lyric.split('')">
                    <span :class="'span' + index">{{ span }}</span>
                </span>
            </div>
        </div>
    </div>
    <div v-else>
        <div class="none">暂无播放的歌曲。。。</div>
    </div>
</template>

<script setup lang="ts">
import { ref, toRefs, watch, onMounted } from 'vue'
import { formatMusicLyrics, handleSwitchBackground } from './js/index.ts'
import useCounterStore from '@/stores/counter'
import { useRouter } from 'vue-router'
import { getSongLyric, getCountDecs, getSongLyricNew } from '@/api/music/index'
import IsLike from '@/components/isLike.vue'
const { currentTime, playSchedule, songInfo, musicLikeListId } = toRefs(useCounterStore());//获取pinia中的数据
const router = useRouter()
const song: any = ref([])//歌词数组
const lyricDOM: any = ref(null)//歌词dom
const imgDOM = ref(null)//获取图片dom
const index = ref(0)//存储歌词数组播放到对应的下标
const countDesc = ref<string | undefined>('')//歌曲的红心用户数量
const isLike = ref<boolean>(false)//是否已经点过赞
const isNoneSong = ref(false)//是否是空歌曲
//初始化
onMounted(() => {
    // 如果歌曲信息存在，则调用获取歌词函数，并将isNoneSong设置为true
    if (songInfo.value) {
        getLyric()
        isNoneSong.value = true
    }
})
//获取歌词
const getLyric = async () => {

    //获取歌曲id
    const id = Number(songInfo.value?.id)
    //获取歌词和歌曲描述
    const [lyricRespone, musicDesc] = await Promise.all([getSongLyric({ id }), getCountDecs({ id }), getSongLyricNew({ id })])
    //将isLike设置为false
    isLike.value = false
    //如果获取歌词失败
    if (lyricRespone.code === "error") {
        console.log("获取歌词失败");
    } else {
        //如果获取歌词成功
        if (lyricRespone.data.code === 200) {
            //格式化歌词
            song.value = formatMusicLyrics(lyricRespone.data?.lrc?.lyric).lyric
            //清除全部选中的song歌词div 
            for (let i = 0; i < song.value.length; i++) {
                let lyricDiv: any = document.querySelector('.lyricDiv' + (i))
                if (!lyricDiv) break
                lyricDiv.style.background = ""
                lyricDiv.style.color = "rgba(255, 255, 255, 0.2)"
            }
        }
    }
    //如果获取歌曲描述失败
    if (musicDesc.code === "error") {
        console.log("获取歌曲描述失败");
    } else {
        //如果获取歌曲描述成功
        if (musicDesc.data.code === 200) {
            //将countDesc设置为歌曲描述
            countDesc.value = musicDesc.data.data?.countDesc
            //将isLike设置为歌曲描述列表中是否有该歌曲id
            isLike.value = musicLikeListId.value.some(ids => ids === id)
        }
    }

    // console.log(lyricResponeNew.data.yrc.lyric);

}
//修改当前歌曲的时间
const handleUpdateAudioSong = (item: any) => {
    //设置播放时间
    playSchedule.value = item.time
    //清除全部选中的song歌词div
    let lyricDiv: any = document.querySelector('.lyricDiv' + index.value)
    lyricDiv.style.background = ""
    lyricDiv.style.color = "rgba(255, 255, 255, 0.2)"
}
//深度监听songInfo的变化
watch(() => songInfo.value?.id, () => {
    getLyric()
    isNoneSong.value = true
})
//监听audio音频的变化触发对应的变化
watch(currentTime, (newVal) => {
    for (let i = 0; i < song.value.length; i++) {
        if (newVal >= song.value[i].time) {
            if (i > 0) {
                let lyricDiv: any = document.querySelector('.lyricDiv' + (i - 1))
                lyricDiv.style.background = ""
                lyricDiv.style.color = "rgba(255, 255, 255, 0.2)"
            }
            index.value = i//记录当前对应的song数组中的歌词下标
            let lyricDiv: any = document.querySelector('.lyricDiv' + i)
            lyricDiv.style.background = "rgba(255, 255, 255, 0.2)"
            lyricDiv.style.color = "#fff"
        }
    }
})
//监听数组下标的变化，触发滚动操作
watch(index, () => {
    //index是当前对应的song数组中的歌词下标
    lyricDOM.value.scrollTo({
        top: Math.floor(lyricDOM.value.scrollHeight / song.value.length) * index.value - 100,
        behavior: 'smooth'
    })
})

</script>

<style lang="scss" scoped>
.recommend {
    width: 100%;
    height: 100%;
    padding-top: 20vh;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    /* animation: enter 1s; */
    background: linear-gradient(to bottom, rgba(var(--color-2)), rgba(var(--color-1)));

    .songInformation {
        width: 31.5%;
        height: 70%;
        position: relative;


        img {
            width: 25vw;
            height: 25vw;
            border-radius: 10px;
        }

        >div {
            display: flex;
            width: 25vw;
            position: absolute;
            right: 0;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            margin-top: 20px;
        }
    }

    .lyric {
        width: 38%;
        height: 70%;
        overflow: auto;

        >div {
            margin: 10px 0;
            padding: 10px;
            border-radius: 10px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.2);
        }

        >div:hover {
            color: #E8EDF0;
            background: rgba(255, 255, 255, 0.2);
        }
    }

    .lyric::-webkit-scrollbar {
        display: none;
    }
}

.songInfoSinger {
    cursor: pointer;
    color: bisque;
    font-size: 12px;
}

.songInfoSinger:hover {
    border-bottom: 1px solid #fff;
}

.none {
    width: 100%;
    height: 90vh;
    text-align: center;
    line-height: 90vh;
    color: #E8EDF0;
}
</style>